<!-- 启用列宽调整 -->
<template>
  <div>
    <h2>启用列宽调整</h2>
    <Table
        :data="orders"
        :columns="columns"
        :loading="isLoading"
        resizable
        @update:columns="handleColumnsUpdate"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import Table from '@/components/Table/Table.vue'

// 模拟订单数据 - 增加更多数据
const orders = ref([
  { title: 'ORD001', customer: '张三', amount: 1999, status: '完成', date: '2024-03-01' },
  { title: 'ORD002', customer: '李四', amount: 2999, status: '待付款', date: '2024-03-02' },
  { title: 'ORD003', customer: '王五', amount: 3999, status: '完成', date: '2024-03-03' },
  { title: 'ORD004', customer: '赵六', amount: 4999, status: '待发货', date: '2024-03-04' },
  { title: 'ORD005', customer: '钱七', amount: 5999, status: '完成', date: '2024-03-05' },
  { title: 'ORD006', customer: '孙八', amount: 6999, status: '待付款', date: '2024-03-06' },
  { title: 'ORD007', customer: '周九', amount: 7999, status: '完成', date: '2024-03-07' },
  { title: 'ORD008', customer: '吴十', amount: 8999, status: '待发货', date: '2024-03-08' },
  // 添加更多数据
  { title: 'ORD009', customer: '郑十一', amount: 9999, status: '完成', date: '2024-03-09' },
  { title: 'ORD010', customer: '冯十二', amount: 10999, status: '待付款', date: '2024-03-10' },
  { title: 'ORD011', customer: '朱十三', amount: 11999, status: '完成', date: '2024-03-11' },
  { title: 'ORD012', customer: '陈十四', amount: 12999, status: '待发货', date: '2024-03-12' },
  { title: 'ORD013', customer: '魏十五', amount: 13999, status: '完成', date: '2024-03-13' },
  { title: 'ORD014', customer: '蒋十六', amount: 14999, status: '待付款', date: '2024-03-14' },
  { title: 'ORD015', customer: '沈十七', amount: 15999, status: '完成', date: '2024-03-15' },
  { title: 'ORD016', customer: '韩十八', amount: 16999, status: '待发货', date: '2024-03-16' },
  { title: 'ORD017', customer: '杨十九', amount: 17999, status: '完成', date: '2024-03-17' },
  { title: 'ORD018', customer: '朱二十', amount: 18999, status: '待付款', date: '2024-03-18' }
])

// 使用ref创建响应式columns
const columns = ref([
  { title: '订单号', dataIndex: 'title', width: '150px' },
  { title: '客户', dataIndex: 'customer', width: '120px' },
  { title: '金额', dataIndex: 'amount',
    render: (amount) => `¥${amount.toLocaleString()}`, width: '150px' },
  { title: '状态', dataIndex: 'status', width: '120px' },
  { title: '日期', dataIndex: 'date', width: '150px' }
])

// 处理列宽更新
const handleColumnsUpdate = (newColumns) => {
  columns.value = newColumns  // 正确更新响应式数据
}


</script>